@import './reset.scss';

$width:1265px;
body{overflow-x:hidden;}
.top,.banner,.nav,.foot1,.foot2{width: $width;margin:0 auto;}
// top-----------------------------------------------------------------
.top{
    height: 60px;
    // background:cyan;
    h1{
        margin-top:10px;
        margin-left: 4px;
        float: left;
        img{
            width: 30px;
            height:30px;
        }
    }
    .top_ul{
        margin-left: 200px;
        float: left;
        li{
            cursor: pointer;
            float: left;
            margin-left:4px;
            line-height:60px;
            box-sizing: border-box;
            a{
                float: left;
                padding:0 20px;
                line-height:58px;
                font-weight:900;
                &:hover{
                    // background: red;
                    border-bottom:2px solid red;
                    transition:all .3s;
                }
                

            }
        }
    }
    .top_r{
        height:60px;
        float: right;
        width:200px;
        background:blueviolet;
        a{
            float: left;
            padding:0 20px;
            line-height:58px;
            cursor: pointer;
            &:hover{
                // background: red;
                border-bottom:2px solid red;
                transition:all .3s;
            }
            

        }
    }
}

// banner ------------------------------------
.banner{
    height:347px;
    background:#f9f9f9;
    position: relative;
    .img{
        cursor: pointer;
        width: $width;
        height:347px;
        position: absolute;
        opacity:0;
        transition: all .7s;
        .img_l{
            float: left;
            margin-left:165px;
            margin-top: 110px;
            h2{
                line-height:36px;
                font:900 36px/42px'';
            }
            h3{
                font:16px/26px'';
            }
            p{
                font-size: 14px;
            }
        }
        .img_r{
            float: left;
            width:300px;
            height: 300px;
            margin-top:20px;
            margin-left:330px;
            img{
                width:100%;
                height: 100%;
            }
        }
    }
    .prevImg,.nextImg{  
        background:#f2f2f2;
        text-align: center;
        line-height:50px;
        width:50px;
        height:50px;
        border-radius:50%;
        cursor: pointer;
        position:absolute;
        z-index:100;
        &:hover{
            color: #fff;
            background:#333;
        }
    }
    .prevImg{
        left:60px;
        top:146px;
    }
    .nextImg{
        right:60px;
        top:146px;
    }
    .huanImg{
        opacity:1;
    }
}

// nav  ---------------------------------nav    nav--------------------------
.nav{
    height:60px;
    position:sticky;
    top:0;
    background: #fff;
    .warpUl{
        background:red;
        float: left;
        width: 360px;
        height: 60px;
        margin-left: 530px;
        position: sticky;
        top:0;
        &>li{
            float: left;
            margin-left:32px;
            margin-top:20px;
            font-size:16px;
        }
        .li1{
            position: relative;
            .neiUl{
                position: absolute;
                left:-10px;
                top:28px;
                background:#fff;
                width: 180px;
                // height: 220px;
                border:1px solid #ccc;
                box-shadow:1px 1px 1px #ccc;
                display:none;
                z-index: 1011;
                li{
                    line-height:30px;
                    padding-left:10px;
                    cursor: pointer;
                    &:hover{
                        background:#f9f9f9;
                    }
                }
            }
        }
    }
}
//  -----------------商品列表
.PlistBox{
    width:1278px;
    background:orchid;
    margin:0 auto;
    overflow: hidden;
    .plist{
        box-sizing: border-box;
        border-top:1px solid #ccc;
        border-left:1px solid #ccc;
        height:538px;
        width:426px;
        float: left;
        text-align: center;
        cursor: pointer;
        background:rgb(239,239,239);
        transition: all .3s;
        dt{
            height:378px;
            width:426px;
            img{
                height:100%;
            }
        }
        dd{
            h4{
                font:14px/14px"";
                margin:60px 0 15px 0;
                color: #242832;
            }
            p{
                font:14px/14px"";
                color: #242832;
                del{
                    color:#ccc;
                }
            }
        }
        &:hover{
            background: #fff;
        }
    }
    /* .plist2{                       
        dt{
            position: relative;
            img{
                position: absolute;
                left:0;top: 0;
                z-index:1;
            }
            .plistNext,.plistprev{
                background:#f2f2f2;
                text-align: center;
                line-height:50px;
                width:50px;
                height:50px;
                border-radius:100px;
                cursor: pointer;
                position:absolute;
                z-index:1;
                &:hover{
                    color: #fff;
                    background:#333;
                }

            }
            .plistNext{
                left:40px;
                top:180px;
            }
            .plistprev{
                right: 40px;
                top:180px;
            }
        }
    } */
}

// 、、、、、、、、、、、、、、foot
.foot1{
    height: 164px;
    overflow: hidden;
    border-bottom: #ccc 1px solid;
    border-top: #ccc 1px solid;
    dl{
        float: left;
        width:25%;
        text-align: center;
        height:164px;
        dt{
            font-size:30px;
            margin:40px 0 14px;
        }
        dd{
            font:900 16px/16px'';
        }
    }
}

.foot2{
    width: 1145px; 
    height:500px;
    background:#fcfcfc;
    overflow: hidden;
    padding:0 60px;
    .title{
        font:900 14px/14px"";
        margin: 20px 0 40px;
    }
    .ul{
        ul{
            float: left;
            width: 234px;
            
            li{
                line-height:36px;
                font-size: 12px;
                a{
                    color: #959695;
                    &:hover{
                        color: #2d3639;
                    }
                }
                
            }
            .liOne{
                color: #2d3639;
                font:900 14px/42px'';
            }
        }
        .foot_right{
            float: left;
            margin-left: 80px;
            p{
                color: #0099cc;
            }
            a{
                display: block;
                width: 110px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                border: 1px solid #4c5258;
                margin:18px 0;
            }
        }
    }
    .bottom{
        float: left;
        margin-top: 40px;
        width: 100%;
        border-bottom: 1px solid #ccc;
        h2{
            float: left;
            font:900 14px/44px"";
        }
        p{
            float: right;
            line-height: 44px;
        }
    }
}
